<template>
  <div v-if="!isCate">
    <el-select v-model="cateData.form.first" multiple collapse-tags placeholder="选择一级分类" style="width: 240px" value-key="catId" @change="onFirstChange">
      <el-option v-for="item in firstCates" :key="item.catId" :label="item.catName" :value="item" />
    </el-select>

    <el-select v-model="cateData.form.second" multiple collapse-tags placeholder="选择二级分类" style="width: 240px" value-key="catId" @change="onSecondChange">
      <el-option-group v-for="group in secondCates" :key="group.label" :label="group.label">
        <el-option v-for="item in group.categoryChilden" :key="item.catId" :label="item.catName" :value="item" />
      </el-option-group>
    </el-select>

    <el-select v-model="cateData.form.third" multiple collapse-tags placeholder="选择三级分类" style="width: 240px" value-key="catId" @change="onThirdChange">
      <el-option-group v-for="group in thirdCates" :key="group.label" :label="group.label">
        <el-option v-for="item in group.categoryChilden" :key="item.catId" :label="item.catName" :value="item" />
      </el-option-group>
    </el-select>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import api from '@/api'

const props = defineProps(['cates', 'isCate'])
const emit = defineEmits(['change'])

watch(
  () => props.cates,
  (val) => {
    if (val) {
      cateData.form.selected = [...val]
    } else {
      cateData.form.selected = []
    }
  }
)

const cateData = reactive({
  form: {}
})

let cates = []
const firstCates = ref([])
const secondCates = ref([])
const thirdCates = ref([])

const loading = ref(false)

const loadData = async () => {
  loading.value = true
  let { data, err } = await api.get(`/medinstrument/third/goodsCategory/getAllGoodsCategory`)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    cates = data.result
    firstCates.value = cates
  }
}

const onFirstChange = (val) => {
  secondCates.value = val
    .filter((e) => e.categoryChilden)
    .map((e) => {
      return {
        label: e.catName,
        categoryChilden: e.categoryChilden
      }
    })
  // 清空已选择的二级目录，三级目录且不在当前一级目录中的数据
  const firstCatIds = val.map((e) => e.catId)
  cateData.form.second = cateData.form.second.filter((e) => firstCatIds.includes(e.parentCatId))

  const secondCatIds = cateData.form.second.map((e) => e.catId)
  cateData.form.third = cateData.form.third.filter((e) => secondCatIds.includes(e.parentCatId))
}
const onSecondChange = (val) => {
  // 设置三级目录内容

  thirdCates.value = val
    .filter((e) => e.categoryChilden)
    .map((e) => {
      return {
        catId: e.catId,
        label: e.catName,
        categoryChilden: e.categoryChilden
      }
    })

  const secondCatIds = val.map((e) => e.catId)
  // 清空已选择的三级目录且不在当前二级目录中的数据
  cateData.form.third = cateData.form.third.filter((e) => secondCatIds.includes(e.parentCatId))
}

const onThirdChange = () => {
  let selectedCate = [...cateData.form.first, ...cateData.form.second, ...cateData.form.third]


  emit('change',selectedCate)
}

onMounted(() => {
  loadData()
})
</script>
<style scoped lang="scss">
// .category {
//   display: flex;
//   align-items: center;

//   .title {
//     display: inline-block;
//     width: 90px;
//     height: 20px;
//     line-height: 20px;
//     margin-right: 25px;
//   }

//   .cates {
//     flex: 1;
//     width: 100%;
//     padding: 20px 0;
//     border-bottom: 1px dashed rgba(220, 223, 230, 1);

//     .cateItems {
//       width: 250px;

// :deep(.el-checkbox__label) {
//   text-overflow: ellipsis;
//   overflow: hidden;
// }

// &.is-checked {
//   :deep(.el-checkbox__label) {
//     color: var(--color-primary);
//   }

// :deep(.el-checkbox__inner),
// :deep(.el-checkbox__inner) {
//   background-color: var(--color-primary);
//   border-color: var(--color-primary);
// }

// :deep(.el-checkbox__inner)::after {
//   border-color: #fff;
// }
//       }
//     }
//   }
// }
</style>
